<template>
    <div class="row">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button :class="activeLine" type="button" v-on:click="drawLineChart()">折线图</button>
            <button :class="activeBar" type="button" v-on:click="drawBarChart()">柱状图</button>
        </div>
        <div id="income" class="col-md-12 graph"></div>
    </div>
</template>

<script>
    export default {
        name: "LineIncome",
        data: function(){
            return {
                chart: null,

                // 年月继承自父页面
                year: null,
                month: null,

                loginUser: null,

                // 1折线图 2柱状图
                isLine: 1,
            }
        },
        mounted() {
            let _this = this;
            _this.$parent.showYear = true;
            _this.$parent.showMonth = true;
            _this.year = _this.$parent.year;
            _this.month = _this.$parent.month;
            if(!_this.year || !_this.month){
                _this.year = new Date().getFullYear();
                _this.month = new Date().getMonth() + 1;
            }
            _this.isLine = SessionStorage.get(SESSION_KEY_LINE_BAR) || null;
            if(_this.isLine === null){
                _this.isLine = 1;
            }
            _this.loginUser = Tool.getLoginUser();
            _this.isLine === 1 ? _this.drawLineChart() : _this.drawBarChart();
        },
        computed:{
            date(){
                const {year,month} = this;
                return {
                    year,
                    month
                }
            },
            activeLine(){
                return {
                    'btn btn-outline-info active': this.isLine === 1,
                    'btn btn-outline-info': this.isLine === 2,
                }
            },
            activeBar(){
                return {
                    'btn btn-outline-info active': this.isLine === 2,
                    'btn btn-outline-info': this.isLine === 1,
                }
            }
        },

        watch:{
            date:{
                handler:function () {
                    this.setTitleOption();
                    this.setDataOption();
                }
            }
        },

        methods: {
            drawChartCommon(){
                let _this = this;
                SessionStorage.set(SESSION_KEY_LINE_BAR,_this.isLine);
                if(!_this.chart){
                    _this.chart = _this.$echarts.init(document.getElementById('income'), 'infographic');
                }
                _this.setDefaultOption();
                _this.chart.showLoading() // 开启 loading 效果
                _this.setDataOption();
            },
            drawLineChart(){
                let _this = this;
                _this.isLine = 1;
                _this.drawChartCommon();
            },
            drawBarChart(){
                let _this = this;
                _this.isLine = 2;
                _this.drawChartCommon();
            },
            setDataOption(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/income/everyday-income-sum/'+_this.year + '/' + _this.month + '/' + _this.loginUser.id).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        _this.chart.hideLoading();
                        _this.chart.setOption({
                            xAxis: {
                                data: DateUtil.daysOf(_this.year,_this.month)
                            },
                            series: [{
                                data: resp.content,
                            }]
                        })
                    }
                })
            },
            setTitleOption(){
                let _this = this;
                let graphType = _this.isLine===1 ? '折线':'柱状'
                let title = _this.year + "年"+_this.month+"月每日收入"+graphType+"图"
                let option = {
                    title:{
                        left: '2%',
                        right: '4%',
                        text: title
                    }
                }
                _this.chart.setOption(option);
            },
            setDefaultOption(){
                let _this = this;
                _this.setTitleOption();
                let option = {
                    // Make gradient line here
                    visualMap: [{
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 0,
                        max: 1200
                    }],
                    tooltip: {
                        trigger: 'axis',
                        textStyle: {
                            color: 'white'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend:{
                        orient: 'horizontal',
                        top: 25,
                        data:['日收入']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        data: [],
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '日收入',
                        data: [],
                        type: _this.isLine === 1?'line':'bar',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        showSymbol: false
                    }]
                };
                _this.chart.setOption(option);
            }
        }
    }
</script>

<style scoped>
    .btn-group{
        margin: 0 auto;
    }
</style>